<template>
    <div class="search">
        <City></City>
        <div class="content">
            <img src="@/assets/images/search-grey.png">
            <input class="f14" type="text" v-model.trim="searchContent">
            <div class="clean" @click="cleanValue" v-show="isActive">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="btn" @click="sendSeachRequest" :class="{ active: isActive }">
            <span class="f14">搜索</span>
        </div>
    </div>
</template>
<script>
import City from "@/components/GoodsList/City.vue"
export default {
    name: "SearchHead",
    data() {
        return {
            searchContent: "",
            isActive: false,
        }
    },
    components: {
        City,
    },
    watch: {
        searchContent(value) {
            if (value?.length != 0)
                this.isActive = true
            else
                this.isActive = false
        }
    },
    methods: {
        sendSeachRequest() {
            if (!this.searchContent) return;
            this.$emit("serachGoods", this.searchContent)
        },
        cleanValue() {
            this.searchContent = "";
        },
    },
    mounted() {
        const { name } = this.$route.query
        this.searchContent = name;
    }
}
</script>
<style lang="scss" scoped>
.search {
    padding: 15px;
    display: flex;
    padding-top: 25px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    position: relative;
    z-index: 9999;

    .content {
        display: flex;
        position: relative;

        img {
            position: absolute;
            width: 25px;
            left: 5px;
            top: 2px;
            height: 25px;
        }

        input {
            border-radius: 15px;
            padding: 7.5px 0;
            padding-left: 30px;
            background-color: #fafafa;
            outline: 0;
            border: 0;

            &::placeholder {
                font-size: 14px;
            }
        }

        .clean {
            width: 15px;
            height: 15px;
            background-color: #979797;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%) rotateZ(45deg);
            border-radius: 50%;

            span {
                position: absolute;
                display: inline-block;
                width: 1.5px;
                height: 8px;
                border-radius: 2px;
                background-color: rgb(255, 255, 255);
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);

                &:nth-of-type(1) {
                    transform: translate(-50%, -50%) rotateZ(88deg);
                }
            }
        }
    }

    .btn {
        width: 48px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: white;
        border-radius: 12px;
        background-color: #d3d3d3;
        font-weight: bold;

        &.active {
            background-color: #f62221;
        }
    }
}
</style>